<!--
 * @Author: XieQiu 雪球
 * @Date: 2021-12-28 10:07:23
 * @LastEditTime: 暂无·
 * @LastEditors: XieQiu 雪球
 * @Description: 表格使用
-->
<template>
  <div id="table">
    <!-- 初始版 -->
    <el-table
      v-if="identification === 'table'"
      v-loading="loading"
      :data="tableData"
      highlight-current-row
      stripe
      border
      height="83%"
      class="tableData"
      @row-click="handleEdit"
      @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="selection" type="selection" width="55" />
      <el-table-column v-if="serialNumber" type="index" label="序号" width="50" />
      <template v-for="item in tableList">
        <el-table-column v-if="item.status" :key="item.id" :label="item.tableName" :prop="item.table" :min-width="item.width ? item.width : ''" />
        <el-table-column v-else :key="item.id" :label="item.tableName" :min-width="item.width ? item.width : ''">
          <template slot-scope="tableScope">
            <span v-for="items in item.table" :key="items.id">
              {{ tableScope.row[items.table] }}
            </span>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-table
      v-if="identification === 'tableDropBox'"
      v-loading="loading"
      :data="tableData"
      highlight-current-row
      stripe
      border
      height="83%"
      class="tableData"
      @row-click="handleEdit"
      @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="selection" type="selection" width="55" />
      <el-table-column v-if="serialNumber" type="index" label="序号" width="50" />
      <template v-for="item in tableList">
        <el-table-column :key="item.id" :label="item.tableName" :min-width="item.width ? item.width : ''">
          <template slot-scope="tableScope">
            <span v-for="items in item.table" :key="items.id">
              {{ tableScope.row[items.table] }}
            </span>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    // 判断是哪个表格
    identification: {
      type: String,
      // 默认第一个
      default: () => ('table')
    },
    // 多选框显示
    selection: {
      type: Boolean,
      default: false
    },
    // 序号
    serialNumber: {
      type: Boolean,
      default: false
    },
    // 加载
    loading: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: () => ('')
    },
    // 数据源
    tableData: {
      type: Array,
      default: () => ([])
    },
    // 表头 字段
    tableList: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      List: []
      // tableData: [],
      // tableList: [
      //   {
      //     id: 1,
      //     tableName: '员工',
      //     table: 'contact',
      //     status: true
      //   },
      //   {
      //     id: 2,
      //     tableName: '部门',
      //     table: [
      //       {
      //         table: 'contact'
      //       },
      //       {
      //         table: 'departmentName'
      //       }
      //     ],
      //     status: false
      //   }
      // ]
    }
  },
  methods: {
    handleEdit(row) {
      this.$emit('handle-edit', row)
    },
    handleSelectionChange(list) {
      this.List = [];
      this.List = list.map(item => item[this.id]);
      this.$emit('handle-selection-change', this.List)
    }
  }

}
</script>

<style lang="scss" scoped>
#table{
  width: 100%;
  .tableData{
    width: 100%;
  }
}
</style>
